<template>
    <el-tabs v-model="activeName" class="flexClass">
        <el-tab-pane label="订单完成" name="first" class="flexClass">
            <el-table :data="paylist" height="100%">
                <el-table-column prop="type" label="付款方式">
                    <template scope="scope">
                        <el-tag type="success" v-if="scope.row.type == 1">现金支付</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.type == 2">可用余额</el-tag>
                        <el-tag type="primary" v-else>赠送余额</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="accountname" label="收款账户" width="130" :show-overflow-tooltip="showOwer">
                </el-table-column>
                <el-table-column prop="paymoney" label="收款金额">
                </el-table-column>
            </el-table>
            <el-table :data="fenpeilist" style="width: 100%" show-summary :summary-method="getSummaries" height="100%">
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="xianjinyeji" label="现金业绩">
                </el-table-column>
                <el-table-column prop="kahaoyeji" label="卡耗业绩">
                </el-table-column>
                <el-table-column prop="xianjinticheng" label="现金提成">
                </el-table-column>
                <el-table-column prop="kahaoticheng" label="卡耗提成">
                </el-table-column>
                <el-table-column prop="qitaticheng" label="其他提成">
                </el-table-column>
            </el-table>
            <div style="padding: 10px">
                <el-button type="danger" @click="back">上一步</el-button>
                <el-button icon="check" type="success" style="float: right;" @click="closewin">完成</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="订单详情" name="second">
            <orderInfo :order="order"></orderInfo>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import C from '#/src/common/common.js'
import orderInfo from './orderInfo.vue'

export default {
    name: 'finish',
    props: ['order', 'paylist', 'fenpeilist'],
    data() {
        return {
            //杂项
            showOwer: true,
            activeName: 'first',
            quanxian: {
                add: 'opencards_add',
                jiezhang: 'opencards_jiezhang',
                fanjiezhang: 'opencards_fan',
                dayin: 'opencards_print',
                fenpei: 'opencards_fen',
                fanfenpei: 'opencards_fanfen',
                chongxinfenpei: 'opencards_chongxin'
            }
        }
    },
    methods: {
        closewin: function() {
            C.closeBrowserWindow()
        },
        getSummaries: function(param) {
            const { columns, data } = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计'
                    return
                }

                const values = data.map(item => Number(item[column.property]))
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr)
                        if (!isNaN(value)) {
                            return prev + curr
                        } else {
                            return prev
                        }
                    }, 0)
                    sums[index] = sums[index].toFixed(2)
                    sums[index] += ' 元'
                } else {
                    sums[index] = 'N/A'
                }
            })
            return sums
        },
        back () {
            this.$emit('goto', {index: 2})
        }
    },
    mounted: async function() {
    },
    components: { orderInfo }
}
</script>
<style>
    .el-tabs__content{
        height: 100%
    }
    .flexClass{
        height:100%;
        display: flex;
        flex-direction: column;
    }
</style>